<template>
  <a href="javascript:;" class="comp-market-coin">
    <img v-if="coin!='USDT'" style="margin-right:10px;margin-left:10px" width="32px" :src="img" />
    <img v-if="(coin=='USDT'&&img)" style="margin-right:10px;margin-left:10px" width="32px" :src="img" alt />
    <img v-if="(coin=='USDT'&&!img)" style="margin-right:10px;margin-left:10px" width="32px" src="/img/usdt@2x.png" alt />
    <span class="text">{{coin}} / {{unit}}</span>
    <i class="icon icon-arrow-down"></i>
  </a>
</template>

<script type="text/babel">
import commonService from "../common/commonService";
export default {
  data() {
    return {
      coin: "",
      unit: "",
      img:''
    };
  },
  props: {
    symbol: {
      type: String,
      default: "BTC_ETH"
    }
  },
  created() {
    // 获取icon和unit
    let ss = this.symbol.split("_");
    console.log(ss)
    this.coin = ss[1].toUpperCase();
    this.unit = ss[0].toUpperCase();
    let data = {
				asset : this.coin
				};
				commonService.getIconList(data).done(rep => {
				  if (rep.data) {
					item.img = rep.data[0].newfilename;
				  } else {
					item.img = "";
				  }
				});
  },
  methods: {}
};
</script>

<style lang="sass" rel="stylesheet/scss">
    @import "../scss/base/var";

    .comp-market-coin {
        min-width: 152px;
        height: $height-nav;
        line-height: $height-nav;
        border-left: 1px #000 solid;
        border-right: 1px #000 solid;
        text-align: center;
        font-size: 13px;
        background-color: inherit;
        transition: all 0s ease;

        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon, .text {
            //vertical-align: middle;
        }
        .icon-coin {
            //font-size: 24px;
            //&:before {
            //    color: #fff;
            //}
            display: inline-block;
            width: 36px;
            height: 36px;
            margin-left: 16px;
            @each $coin in btc,
                            all,
                            apa,
                            eth,
                            cfc,
                            dabt,
                            mae,
                            moac,
                            mskc,
                            ntcc,
                            swtc,
                            tcc,
                            wkt,
                            udc,
                            ltc,
                            act,
                            smc,
                            let,
                            omg,
                            eos,
                            btm,
                            tv,
                            usc,
                            ogc,
                            bcd,
                            bch,
                            bchc,
                            bta,
                            btd,
                            btg,
                            lbtc,
                            sbtc,
                            abtc,
                            bck,
                            btp,
                            yoyow,
                            trx,
                            cbtc,
                            bcx,
                            ssc,
                            emo,
                            etf,
                            etg,
                            bth,
                            sltc,
                            lts,
                            aac,
                            kcash,
                            btf,
                            lch,
                            usdt,
                            smcf1,
                            vca,
                            hmc,
                            gto,
                            wtc,
                            storj,
                            salt,
                            topc,
                            appc,
                            aec,
                            iep,
                            noa,
                            gbk,
                            aos,pdtc,
                            call,
                            vollar,
                            crl,
                            dusd {
                              
                &.coin-#{$coin} {
                    background-image: url('../img/#{$coin}@2x.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: contain;
                }
            }
        }
        .icon-arrow-down{
            margin: 0 16px 0 10px;
            padding: 4px;
            //border: 1px solid #5c5d5e;
            font-weight: bolder;
            color: #fff;
        }
        .text {
            color: #fff;
        }
    }
</style>